<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
          前面说了要把浮动的元素放到一个父元素div中但是在真正的网页开发的时候，我们不会设置父元素的高度只会设置父元素的宽度
           这就带来了一个问题，元素在文档流中如果不设置高宽那么元素的高度和宽度默认有内部的子元素撑起来
           现在父元素内部的子元素浮动了脱离文档流，这一规律不再适用了,那么父元素会没有高度，父元素没有高的话，
           就无法充当一个块级元素包含内部的浮动元素，也就意味着父元素和内部的子元素一起脱离了文档流，那父元素下面的其他元素便会挤上来
         */
      * {
        padding: 0;
        margin: 0;
      }

      .box2,
      .box3,
      .box4 {
        width: 200px;
        height: 200px;
      }
      .box1{
          width: 1000px;
          /* height: 400px; */
          /* overflow: hidden; */
          border: 1px solid red;
      }

      .box2{
          background-color: royalblue;
          float: left;
      }
      .box3{
          background-color: salmon;
          float: left;   
      }
      .box4{
          background-color: seagreen;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>

    <div class="box4"></div>
  </body>
</html>
